<template>
	<el-table v-bind="$attrs" border>
		<el-table-column type="index" label="序号" fixed width="61px" />
		<slot> </slot>
		<el-table-column label="操作" width="80px" fixed="right">
			<template #default="scope">
				<el-button icon="ele-Edit" size="small" text type="primary" @click="handleDelete(scope.row)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="table-footer">
		<el-button @click="handleAdd" icon="ele-Plus" circle />
		<slot name="footer"> </slot>
	</div>
</template>
<script lang="ts" setup>
/** 可以增加修改的表格, 用法
<MkEditableTable :data="tableData" @add="addItem" @delete="deleteItem">
	<el-table-column label="选项">
		<template #default="{ row }">
			<el-input v-model="row.label"></el-input>
		</template>
	</el-table-column>
</MkEditableTable>

// 添加选项
const addItem = () => {
  tableData.value.push({});
}

// 删除选项
const deleteItem = (row: any) => {  
  tableData.value = tableData.value.filter((item) => item != row);
}
 */
defineOptions({
	name: 'MkEditableTable',
});

const props = defineProps({
	buttonWidth: {
		type: String || Number,
		default: '100px',
	},
});

const emit = defineEmits(['add', 'delete']);

// 增加行
const handleAdd = () => {
	emit('add');
};

// 删除行
const handleDelete = (row: any) => {
	emit('delete', row);
};
</script>
<style lang="scss" scoped>
.table-footer {
	display: flex;
	flex-wrap: nowrap;
	padding: 2px;
}
</style>
